import React from 'react';
import { View, Text, StyleSheet, PixelRatio, Image } from 'react-native';
import ImageExport from '../../public/ImageExport';

export default class GroupItem extends React.Component {
    constructor (props) {
        super(props);
        
    }

    render () {
        const {data} = this.props
        const bgColor = {
            backgroundColor: this.props.bgColor
        }

        return (
            <View style={[styles.hotelWrap, bgColor]}>
                {data[0].length == 1 ?
                    <View style={[styles.item, styles.alignCenter, styles.flex1, styles.firstWrap]}>
                        <View style={[{flex: 2}, styles.fontCenter]}>
                            <Text style={styles.font}>{data[0][0].title}</Text>
                        </View>
                        {data[0][0].uri && <Image
                            source={ImageExport[data[0][0].uri]}
                            style={{flex: 3}}
                            resizeMethod="auto"
                        />}
                    </View> :
                    <View style={[styles.item, styles.flex1]}>
                        <View style={[styles.flex1, styles.fontCenter, styles.lineBottom]}>
                            <Text style={styles.font}>{data[0][0].title}</Text>
                        </View>
                        <View style={[styles.flex1, styles.fontCenter]}>
                            <Text style={styles.font}>{data[0][1].title}</Text>
                        </View>
                    </View>
                }
                
                <View style={[styles.item, styles.flex1, styles.lineLeftRight]}>
                    <View style={[styles.flex1, styles.fontCenter, styles.lineBottom]}>
                        <Text style={styles.font}>{data[1][0].title}</Text>
                    </View>
                    <View style={[styles.flex1, styles.fontCenter]}>
                        <Text style={styles.font}>{data[1][1].title}</Text>
                    </View>
                </View>
                <View style={[styles.item, styles.flex1]}>
                    <View style={[styles.flex1, styles.fontCenter, styles.lineBottom]}>
                        <Text style={styles.font}>{data[2][0].title}</Text>
                    </View>
                    <View style={[styles.flex1, styles.fontCenter]}>
                        <Text style={styles.font}>{data[2][1].title}</Text>
                    </View>
                </View>
            </View>
        )
    }
}

var styles = StyleSheet.create ({
    hotelWrap: {
        height: 85,
        flexDirection: 'row',
        borderRadius: 5,
        marginTop: 5,
        marginLeft: 5,
        marginRight: 5,
        padding: 2,
        marginTop: 2
    },
    item: {
        height: 80
    },
    flex1: {
        flex: 1
    },
    font: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold'
    },
    fontCenter: {
        justifyContent: 'center', // 垂直居中
        alignItems: 'center', // 水平居中
    },
    alignCenter: {
        alignItems: 'center'
    },
    lineLeftRight: {
        borderLeftWidth: 1, // 1/PixelRatio.get(),
        borderRightWidth: 1, //1/PixelRatio.get(),
        borderColor: '#fff',
    },
    lineBottom: {
        borderBottomWidth: 1/PixelRatio.get(),
        borderColor: '#fff',
    },
    firstWrap: {
        flexDirection: 'column',
    }
})
